<!-- 首页 -->
<template>
	<view class="container ">
		<TopNav title="线下认证" bg-color="#fff"></TopNav>
		<view class="check-banner progress" v-if="detailData && detailData.status == 0">
			<image src="/static/images/index/check.png" mode=""></image>
			<text>资料正在审核中，请耐心等待。</text>
		</view>
		<view class="check-banner pass" v-else-if="detailData && detailData.status == 1">
			<image src="/static/images/index/pass.png" mode=""></image>
			<text>资料审核通过。</text>
		</view>
		<view class="check-banner reject" v-else-if="detailData && detailData.status == 2">
			<image src="/static/images/index/reject.png" mode=""></image>
			<text>资料审核不通过，请重新提交申请。</text>
		</view>
		<view class="main">
			<view class="p-8 f-s12 line-heigth18 f-w400" style="background-color: #F0F1F2;border-radius: 12rpx;">
				<u-icon name="info-circle" size="14" color="#FE3F59" class="explain" bold></u-icon>
				<text>申请加入专搭服务需要进行线下认证，线下认证是指在我们合作的摄影机构进行拍摄，并上传相应的原始视频和照片到平台进行审核。</text>
				<text class="text-theme"
					@click="handleToPage('/pages/common/document/index?title=如何进行线下认证')">《如何进行线下认证》</text>
				<text class="text-theme"
					@click="handleToPage('/pages/common/document/index?title=合作机构及说明')">《了解详细的合作机构及说明》</text>
			</view>
			<view class="f-s16 f-w500 line-height22 m-t24">
				<text>摄影机构</text>
			</view>
			<FormInput title="摄影机构名称" v-model="form.name" placeholder="请输入摄影机构名称" class="m-t11">
			</FormInput>
			<FormSelect title="位置" :value="form.position" @open="handlePickerOpen" @confirm="handlePickerConfirm"
				placeholder="请选择市区" picker-title="请选择市区" class="m-t11">
				<van-picker :columns="columns" @change="handlePickerChange" ref="picker" />
			</FormSelect>
			<view class="m-t14">
				<view class="">
					<text class="f-w500 f-s15 line-height22">图片资料</text>
				</view>
				<view class="m-t8">
					<text
						class="line-height20 text-gray f-s14">注意：1、请上传照相馆拍摄的视频和图片，须1个视频和不少5张图片；2、视频和照片审核通过后，客户可见；</text>
				</view>
			</view>
			<view class="m-t14">
				<view class="flex flex-wrap justify-between">
					<view>
						<UploadVideo width="210rpx" height="210rpx" v-model="form.album.videos">
							<view class="upload-image">
								<image src="/static/images/login/video.png" class="width-28" mode="widthFix"></image>
								<text class="m-t8 text-gray f-s12">上传视频</text>
							</view>
						</UploadVideo>
					</view>

					<view class="image-item" :class="{'m-t8':index>1}" v-for="(item,index) in form.album.images"
						:key="index">
						<UploadImage width="210rpx" height="210rpx" v-model="form.album.images[index]">
							<view class="upload-image">
								<image src="/static/images/login/photo.png" class="width-28" mode="widthFix"></image>
								<text class="m-t8 text-gray f-s12">上传照片</text>
							</view>
						</UploadImage>
					</view>
				</view>
			</view>
		</view>
		<view class="flex justify-center full-width fixed-bottom bg-white p-lr16">
			<view class="self-btn full-width" hover-class="pressed" @click="handleConfirm">
				<text>提交审核</text>
			</view>
		</view>
		<Toast></Toast>
		<Modal :show.sync="modalShow" title="提示" content="您是否确认提交审核？\n如果存在正在审核中数据将被覆盖" @confirm="handleModalConfirm()">
		</Modal>
	</view>
</template>

<script>
	import Modal from '@/components/modal'
	import UploadImage from '@/components/upload-image'
	import UploadVideo from '@/components/upload-video'
	import FormSelect from '@/components/form-select'
	import FormInput from '@/components/form-input'
	import {
		authStepsDetails,
		offlineAuth
	} from "@/api/mine/auth.js"

	import areaList from '@/common/database_area.js';
	export default {
		name: "",
		components: {
			UploadImage,
			UploadVideo,
			FormSelect,
			FormInput,
			Modal
		},
		data() {
			return {
				modalShow: false,
				citys: {},
				columns: [],
				detailData: {},
				form: {
					name: '',
					position: '',
					album: {
						videos: '',
						images: []
					}
				}
			}
		},
		onLoad() {
			this.getDetail()
			this.formatCityData()
		},
		methods: {
			handleToPage(path) {
				this.$tab.navigateTo(path)
			},
			handlePickerOpen() {
				if (this.citys && this.form.position) {
					let positionList = this.form.position.split("/")
					let pros = Object.keys(this.citys)
					let proIndex = pros.indexOf(positionList[0])
					let citys = this.citys[pros[proIndex]]
					let cityIndex = citys.indexOf(positionList[1])
					this.columns = [{
							values: pros, // 第一列：省份名称数组
							defaultIndex: proIndex // 默认选中第一个城市
						},
						{
							values: citys, // 第二列：默认第一个省份的城市数组
							defaultIndex: cityIndex // 默认选中第一个城市
						}
					]
				}
			},
			handlePickerChange(event) {
				const {
					picker,
					value,
					index
				} = event.detail;
				if (index == 0) {
					picker.setColumnValues(1, this.citys[value[0]]);
				}
			},
			handlePickerConfirm(event) {
				let values = this.$refs['picker'].getValues()
				this.form.position = values.join("/")
			},
			formatCityData() {
				const citys = {}
				// 转换为 { 省名: 市数组 } 格式
				Object.keys(areaList.province_list).forEach(provinceCode => {
					const provinceName = areaList.province_list[provinceCode];
					citys[provinceName] = [];
					Object.keys(areaList.city_list).forEach(cityCode => {
						if (cityCode.startsWith(provinceCode.substring(0, 2))) {
							citys[provinceName].push(areaList.city_list[cityCode]);
						}
					});
				});

				this.columns = [{
						values: Object.keys(citys), // 第一列：省份名称数组
						defaultIndex: 0 // 默认选中第一个城市
					},
					{
						values: citys[Object.values(citys)[0]], // 第二列：默认第一个省份的城市数组
						defaultIndex: 0 // 默认选中第一个城市
					}
				]

				this.citys = citys
			},
			getDetail() {
				authStepsDetails({
					auth_type: 8
				}).then(res => {
					let {
						data: {
							auth_detail
						}
					} = res
					this.detailData = auth_detail
					this.form.name = auth_detail.name
					this.form.position = auth_detail.name
					let album = JSON.parse(auth_detail.album)
					this.form.album.videos = album.videos
					this.form.album.images = this.padArray(album?.images ?? [])
				}).catch(() => {
					this.form.album.images = this.padArray()
				})
			},
			padArray(arr = [], padValue = '', targetLength = 5) {

				while (arr.length < targetLength) {
					arr.push(padValue);
				}
				return arr;
			},
			handleModalConfirm() {
				// 线下认证
				this.$modal.loading('正在提交').then(() => {
					offlineAuth(this.form).then(res => {
						this.$toast(res.msg)
						this.getDetail()
						this.$modal.closeLoading()
					}).catch(() => this.$modal.closeLoading())
				})
			},
			handleConfirm() {
				if (!this.validateForm(this.form)) return
				this.modalShow = true
			},
			validateForm(form) {
				// 校验摄影机构
				if (!form.name) {
					this.$toast('请输入摄影机构名称');
					return false;
				}

				// 校验位置
				if (!form.position) {
					this.$toast('请选择城市位置');
					return false;
				}

				if (!form.album.videos) {
					this.$toast('请上传视频')
					return false
				}
				if ((form.album.images?.filter(item => {
						return item
					}).length ?? 0) < 5) {
					this.$toast('请上传至少5张图片')
					return false
				}

				// 所有校验通过
				return true;
			}
		}
	}
</script>
<style lang="scss">
	@import '@/common/css/var.scss';

	page {
		background-color: #fff;
		@include fixed-bottom;
	}
</style>
<style scoped lang="scss">
	.container {
		.main {
			padding: 24rpx 32rpx;
		}
		.explain{
			    display: inline-flex;
			    vertical-align: bottom;
				padding-right: 5rpx;
		}
	}
</style>